<template>
<div id="resourceEdit">
    <Modal v-model="resource.resourceEditModalSta" title="编辑资源" :loading="loading" @on-ok="resourceEditOk">
        <Row>
            <Col :span="20">
            <Form ref="resourceEditForm" :model="resource.resourceOneSta" :rules="resourceEditRule" label-position="right" :label-width="100">
                <FormItem label="用户ID" prop="id">
                    <Input v-model="resource.resourceOneSta.id" disabled></Input>
                </FormItem>
                <FormItem label="用户名" prop="title">
                    <Input v-model="resource.resourceOneSta.title"></Input>
                </FormItem>
                <FormItem label="链接地址">
                    <Input v-model="resource.resourceOneSta.url"></Input>
                </FormItem>
            </Form>
            </Col>
        </Row>
    </Modal>
</div>
</template>
<script>
import Vue from 'vue';
import {
    Modal,
    Row,
    Col,
    Form,
    FormItem,
    Input,
    Message
} from 'iview'
Vue.prototype.$Modal = Modal;
Vue.prototype.$Message = Message;
import {
    mapState,
    mapMutations
} from 'vuex'
export default {
    name: 'ResourceEdit',
    data() {
        return {
            loading: true,
            //表单验证规则
            resourceEditRule: {
                title: {
                    required: true,
                    message: '请输入资源名称',
                    trigger: 'blur'
                }
            }
        };
    },
    created() {},
    mounted() {},
    computed: {
        ...mapState({
            resource: state => state.resource //vuex资源
        })
    },
    methods: {
        ...mapMutations([
            'resourceEditModalMut', //编辑用户模态框
            'resourceListUpdateOneMut' //更新用户列表数据
        ]),
        //提交
        resourceEditOk() {
            let _self = this;
            this.$refs['resourceEditForm'].validate((valid) => {
                if (valid) {
                    setTimeout(() => {
                        let obj = this.$qs.stringify({
                            id: this.resource.resourceOneSta.id,
                            title: this.resource.resourceOneSta.title,
                            pId: this.resource.resourceOneSta.pId,
                            url: this.resource.resourceOneSta.url,
                            crtime: this.resource.resourceOneSta.crtime,
                            chtime: new Date()
                        });
                        //根据用户id获取用户角色
                        this.$axios.post('/acl_resource/updateOne', obj).then(res => {
                            if (res.data) {
                                _self.resourceEditModalMut({
                                    state: false
                                }); //关闭模态框
                            }
                        });
                    }, 1000);
                } else {
                    //动画
                    this.loading = false;
                    this.$nextTick(() => {
                        this.loading = true;
                    });
                }
            })
        } //,
        // //取消
        // resourceEditCancel() {
        //     this.$refs['resourceEditForm'].resetFields();
        // }
    },
    components: {
        Modal,
        Row,
        Col,
        Form,
        FormItem,
        Input,
        Message
    }
}
</script>
